模組系統

前言

照書中跟查到的資料顯示，JavaScript 語言長期以來並未內建支援模組系統，社群上發展了兩套知名的模組系統，但它們並不相容：

• CommonJS Modules
• Asynchronous Module Definition (AMD)

在 ES6中 加入了模組系統的支援，它採用了CommonJS 與 AMD 的優點，成了未來 JavaScript 語言中重要的特性。

模組系統是什麼 ?

假設現在的情境是程式碼愈寫愈多，整個專案的規模愈來愈大時，我們會需要一個可以管理程式碼的方式，這個需求其實是很明確的，有經驗的工程師會在開發之前，就考慮到這個情境而規劃。

要如何使用模組系統

ES6 的模組系統使用上相當簡單，大致可歸納為三個重點：

• ES6 的模組程式碼會自動變成 strict-mode (嚴格模式)。
• ES6 的模組是一個檔案為一個模組。
• ES6 模組使用 export (輸出)與 import (輸入)語句來進行模組輸出與輸入。輸出通常位於檔案最後，輸入位於最前面。

多個輸出名稱

// utilities.js
export const emailValueToString = (values) => {
  const newValues = _.cloneDeep(values)

  if (!_.isEmpty(newValues.email_list)) {
    newValues.email_list = arrayToString(newValues.email_list)
  }
  return newValues
}

export const emailValueToArray = (values) => {
  const newValues = _.cloneDeep(values)

  if (!_.isEmpty(newValues.email_list)) {
    newValues.email_list = stringToArray(newValues.email_list)
  }
  return newValues
}

上面的檔案中，寫了兩個 function，我們稱之為多個輸出名稱的情況，有兩種方式可以進行輸入：

import { emailValueToString, emailValueToArray } from './utilities'

另一種是使用萬用字元 (*)，代表要輸入所有的輸出定義的值，不過我們需要加上一個模組名稱，請看以下說明。

import * as module from './utilities'

console.log(module.emailValueToString)
console.log(module.emailValueToArray)

單一輸出名稱

這個要輸出成為模組的程式碼檔案中，只會有一個輸出的變數 / 常數、函式、類別或物件，通常會加上 default 關鍵詞。如果要使用有回傳值的函式，通常也是用單一輸出的方式，請看以下說明。

// JS 版本
const emailValueToString = (values) => {
  const newValues = _.cloneDeep(values)

  if (!_.isEmpty(newValues.email_list)) {
    newValues.email_list = arrayToString(newValues.email_list)
  }
  return newValues
}

export default emailValueToString

// React 版本
import React, { useState } from "react";
import { Card } from "react-bootstrap";

import SiteSetupDetail from "../SiteSetupDetail";

import QueryForm from "./components/QueryForm";

const SiteSetupQuery = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Card className="mt-1 text-left">
        <Card.Header>Query</Card.Header>
        <Card.Body>
          <QueryForm setOpen={() => setOpen(true)} />
        </Card.Body>
      </Card>
      <SiteSetupDetail open={open} />
    </>
  );
};

export default SiteSetupQuery;

對單一輸出的模組就不需要用花括號，這代表只輸入以 default 值定義的輸出語句。

套件管理器

講到套件管理器，現在就會想到 npm & yarn 這兩個是目前最多使用的。

NPM and Yarn 簡介

NPM：

NPM 的全名是是 Node Package Manager 的簡稱，，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。

Yarn：

是一個新的 package 管理器，其功能與 npm 相同，但 npm 最為人詬病的是安裝速度很慢。它具有與現有工作流程相同的功能集，同時運行速度更快，更安全，更可靠，簡單來說用 Yarn 來安裝套件比起 npm 更來得快速！

雖然是這樣講，但現在的 NPM 我相信表現應該都有改善了。

NPM

1. 首先如果在專案裡要使用 NPM 的話，我們要輸入 npm init。

   系統，會詢問我們幾個問題，

   package name：你這個 Project 要叫什麼名字

   version：你決定這個 Project 現在該是第幾版

   description：Project 基本介紹

   entry point：進入點，如果要跑你的 Project 應該要執行哪個檔案

   author：作者名字

   license：你這個 Project 是採用什麼授權的

   基本上結束後，你可以看到這個資料夾底下，新增了一個 Package.json

2. 覺得上面很麻煩的話，可以直接輸入 npm init -y。

   這個指令跟 npm init 幾乎一樣，只是它會幫你把預設選項全部跳過，產生一個空白的 package.json。